<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>我的 OJ 平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google Fonts -->
    <link href="css/css.css" rel="stylesheet">

    <!-- Favicon -->
    

    <!-- Template CSS Files -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/yellow.css">

    <!-- Revolution Slider CSS Files -->
    <link rel="stylesheet" type="text/css" href="css/settings.css">
    <link rel="stylesheet" type="text/css" href="css/layers.css">
    <link rel="stylesheet" type="text/css" href="css/navigation.css">


    <link rel="stylesheet" type="text/css" href="css/1.css">

    <!-- Template JS Files -->
    <script type="text/javascript" src="js/modernizr.js"></script>

</head>

<body class="dark double-diagonal">
    <div class="wrapper">
        <!-- Header Starts -->
        <header id="header" class="header">
            <div class="header-inner">
                <!-- Navbar Starts -->
                <nav class="navbar navbar-expand-lg p-0" id="singlepage-nav">
					<!-- Logo Starts -->
                    <div class="logo">
                        <h3 style="color: #ffffff;">我的在线OJ平台</h3>
                    </div>
					<!-- Logo Ends -->
					<!-- Hamburger Icon Starts -->
                    <button class="navbar-toggler p-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span id="icon-toggler">
						  <span></span>
						  <span></span>
						  <span></span>
						  <span></span>
						</span>
					</button>
					<!-- Hamburger Icon Ends -->
					<!-- Navigation Menu Starts -->
                    <div class="collapse navbar-collapse nav-menu" id="navbarSupportedContent">
                        <ul class="nav-menu-inner ml-auto">
                            <li><a data-toggle="collapse" data-target=".navbar-collapse.show" class="link-menu" href="#main"><i class="fa fa-home"></i> home</a></li>
                            <li><a data-toggle="collapse" data-target=".navbar-collapse.show" class="link-menu" href="#"><i class="fa fa-user"></i>题库</a></li>
                        </ul>
                    </div>
					<!-- Navigation Menu Ends -->
                </nav>
                <!-- Navbar Ends -->
            </div>
        </header>
		<!-- Header Ends -->
        <!-- Main Slider Section Starts -->
        <section id="main" class="main" style="background-color: #36454f;">
            <!-- Container Starts -->
            <div class="container">
                <div class="row mb-5" id="parent">
                    <div class="jumbotron" id="myleft">
                        <!-- <h1>Container size jumboton</h1>
                        <p>Think BIG with a Bootstrap Jumbotron!</p> -->
                    </div>
                    <div id="myright">
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">代码框</label>
                            <div id="editor" style="min-height:400px">
                                <textarea class="form-control" id="codeEditor" style="width: 100%; height: 400ox;" rows="25"></textarea>
                            </div>
                        </div>
                        <input type="button" value="提交" class="mysubmit">
                        <div class="jumbotron" id="result">
                            
                        </div>
                    </div>
                </div>
            <!-- Container Ends -->
            </div>
            <!-- Container Ends -->
        </section>
        <!-- About Section Ends -->
        <footer class="footer text-center">
            <!-- Container Starts -->
            <div class="container">
                <h5>&copy; by wzzzz</h5>
            </div>
            <!-- Container Ends -->
        </footer>
    </div>
    <!-- Wrapper Ends -->
    <script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
    <script src="src-noconflict/ace.js"></script>
    <script src="src-noconflict/ext-language_tools.js"></script>
    <!-- <script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.2.9/ext-language_tools.js"></script> -->
    <script>
        function initAce() {
            // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
            let editor = ace.edit("editor");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            editor.setTheme("ace/theme/twilight");
            editor.session.setMode("ace/mode/java");
            editor.resize();
            document.getElementById('editor').style.fontSize = '20px';

            return editor;
        }

        let editor = initAce();

        function getProblem() {
            $.ajax({
                url: "desc" +location.search,
                method: "GET",
                success: function(data,status){
                    loading(data);
                }
            })
        }
        function loading(problem){
            let desc = document.querySelector("#myleft");
            let h = document.createElement("h2");
            h.innerHTML = problem.id+"."+problem.title;
            desc.appendChild(h);
            let level = document.createElement('p');
            level.innerHTML = problem.level;
            if(problem.level == "简单"){
                level.style = "color:rgb(48, 221, 32)";
            }else if(problem.level == "困难"){
                level.style = "color:red";
            }else{
                level.style = "color:gold";
            }
            desc.appendChild(level);
            let pre = document.createElement('pre');
            let p = document.createElement('p');
            p.innerHTML = problem.description;
            pre.appendChild(p);
            desc.appendChild(pre);

            // let codeEditor = document.querySelector("#codeEditor");
            // codeEditor.innerHTML = problem.templateCode;
            editor.setValue(problem.templateCode);

            let submitButton = document.querySelector('.mysubmit');
            submitButton.onclick = function() {
                let body = {
                    id: problem.id,
                    code: editor.getValue(),
                };
                $.ajax({
                    url: "result",
                    method: "post",
                    data: JSON.stringify(body),
                    success: function(data,status){
                        let result = document.querySelector("#result");
                        if(data.error == 0){
                            // 编译运行成功
                            console.log("编译运行成功");
                            result.innerHTML = data.stdout;
                        }else{
                            console.log("编译运行失败");
                            result.innerHTML = data.reason;
                        }
                    }
                })
            }
        }
        getProblem();
    </script>

    <!-- Template JS Files -->
    <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script src="js/js.js"></script>
    <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
   
    <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="js/jquery.singlePageNav.min.js"></script>

    <!-- Revolution Slider Main JS Files -->
    <script type="text/javascript" src="js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>

    <!-- Revolution Slider Extensions -->

    <script type="text/javascript" src="js/revolution.extension.actions.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.carousel.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.migration.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="js/revolution.extension.video.min.js"></script>


    <!-- Main JS Initialization File -->
    <script type="text/javascript" src="js/custom.js"></script>

    <!-- Revolution Slider Initialization Starts -->
    <script type="text/javascript">
	(function(){
		"use strict";
        var tpj = jQuery;
        var revapi4;
        tpj(document).ready(function() {
            if (tpj("#rev_slider").revolution == undefined) {
                revslider_showDoubleJqueryError("#rev_slider");
            } else {
                revapi4 = tpj("#rev_slider").show().revolution({
                    sliderType: "standard",
                    jsFileLocation: "js/plugins/revolution/js/",
                    dottedOverlay: "none",
					sliderLayout:"fullscreen",
                    delay: 9000,
                    navigation: {
                        keyboardNavigation: "off",
                        keyboard_direction: "horizontal",
                        mouseScrollNavigation: "off",
                        onHoverStop: "off",
                        touch: {
                            touchenabled: "on",
                            swipe_threshold: 75,
                            swipe_min_touches: 1,
                            swipe_direction: "horizontal",
                            drag_block_vertical: false
                        },
                        bullets: {
                            enable: false,
                            hide_onmobile: true,
                            hide_under: 600,
                            style: "metis",
                            hide_onleave: true,
                            hide_delay: 200,
                            hide_delay_mobile: 1200,
                            direction: "horizontal",
                            h_align: "center",
                            v_align: "bottom",
                            h_offset: 0,
                            v_offset: 30,
                            space: 5,
                            tmp: '<span class="tp-bullet-img-wrap">  <span class="tp-bullet-image"></span></span>'
                        }
                    },
                    viewPort: {
                        enable: true,
                        outof: "pause",
                        visible_area: "80%"
                    },
                    responsiveLevels: [1240, 1024, 778, 480],
                    gridwidth: [1240, 1024, 778, 480],
                    gridheight: [600, 600, 500, 400],
                    lazyType: "none",
                    parallax: {
                        type: "mouse",
                        origo: "slidercenter",
                        speed: 2000,
                        levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50],
                    },
                    shadow: 0,
                    spinner: "off",
                    stopLoop: "off",
                    stopAfterLoops: -1,
                    stopAtSlide: -1,
                    shuffle: "off",
                    hideThumbsOnMobile: "off",
                    autoHeight: "off",
                    hideSliderAtLimit: 0,
                    hideCaptionAtLimit: 0,
                    hideAllCaptionAtLilmit: 0,
                    debugMode: false,
                    fallbacks: {
                        simplifyAll: "off",
                        nextSlideOnWindowFocus: "off",
                        disableFocusListener: false,
                    }
                });
            }
        });
		
	
			
	})(jQuery);
    </script>
    <!-- Revolution Slider Initialization Ends -->
</body>

</html>